{% extends "base.html" %}

{% block content %}
<h2>Login</h2>
<p>Login to your account using your username and password.</p>

{% form.open "users/login" %}
    <div class="input text required">
        {% form.label "Username", "username" %}
        <span class="input">{% form.input "username", "", {"id": "username", "size": "30", "tabindex": 1} %}</span>
    </div>
    <div class="input password required">
        {% form.label "Password", "password" %}
        <span class="input">{% form.password "password", "", {"id": "password", "size": "30", "tabindex": 2} %}</span>
    </div>
    <div class="input submit">
        {% form.submit "login", "Login", {"tabindex": 3} %}
    </div>
{% form.close %}

{% endblock %}

{% block jscript %}
<script>
    (function($){
        $("#password").caps(function(caps) {
            if($.browser.safari) return; // Safari already indicates caps lock
            if(caps) {
                alert('Your caps lock is on!');
            } else {
                // no caps lock on
            }
        });

        {% if error %}
            $.pnotify({ pnotify_title: "Authorization Error", pnotify_text: "{{ error }}", pnotify_type: "error", pnotify_history: false });
        {% endif %}
    })(jQuery);
</script>
{% endblock %}